<template>
  <div>
    <ul class="task-tags">
      <li @click="showOrderAction" v-if="order" class="tag-item">目的 ({{ order.name }})
        <img src="../../assets/icon/icon_arrow_down.png" alt="" />
      </li> <!-- 最近 热门 -->
      <li @click="showOrderAction" v-else class="tag-item">目的
        <img src="../../assets/icon/icon_arrow_down.png" alt="" />
      </li> <!-- 最近 热门 -->
      <li @click="showTypeAction" v-if="type" class="tag-item">分类  ({{ type.name }})
        <img src="../../assets/icon/icon_arrow_down.png" alt="" />
      </li> <!-- 问答 店铺 -->
      <li @click="showTypeAction" v-else class="tag-item">分类
        <img src="../../assets/icon/icon_arrow_down.png" alt="" />
      </li> <!-- 问答 店铺 -->
      <li @click="showLevelAction" v-if="level" class="tag-item">点评师等级 ({{ level.name }})
        <img src="../../assets/icon/icon_arrow_down.png" alt="" />
      </li> <!-- 等级 -->
      <li @click="showLevelAction" v-else class="tag-item">点评师等级 
        <img src="../../assets/icon/icon_arrow_down.png" alt="" />
      </li> <!-- 等级 -->
    </ul>
    <van-pull-refresh v-model="isRefreshing">
    <ul v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="400" class="question-wrapper">
      <li v-for="(item, index) in data.results" @click="viewDetail(index)" class="question-info-item">
        <div class="question-header">
          <img class="avatar" :src="item.asker.avatar" alt="" />
          <span class="name">{{ item.asker.nickname }}</span>
          <span class="price">￥{{ item.reward }}</span>
        </div>
        <div class="question-content">
          <div :class="[ 'question-desc', item.attachments.length ? 'dianping-type' : '']">
            <p class="question-text">{{ item.text }}</p>
            <div class="question-tags">
              <span v-if="item.purpose" class="tag-item tag-red">{{ item.purpose }}</span>
              <span v-if="item.catalog" class="tag-item">{{ item.catalog.name }}</span>
            </div>
          </div>
          <div v-if="item.attachments.length" class="question-painting">
            <img :src="item.attachments[0]" alt="">
          </div>
        </div>
      </li>
    </ul>
    </van-pull-refresh>
    <blank-content v-if="!data.results.length" text="暂无内容"></blank-content>
    <div class="grab-btn" @click="grabQuestion">
      <img src="../../assets/img/img_grab.png" alt="" />
    </div>
    <van-actionsheet v-model="orderActionShow" :actions="orderActions" />
    <!--
    <van-actionsheet v-model="typeActionShow" :actions="typeActions" />
    -->
    <van-actionsheet v-model="levelActionShow" :actions="levelActions" />
    <van-popup v-model="typeActionShow" position="bottom">
      <van-picker show-toolbar :columns="typeList" @confirm="pickerConfirm" @cancel="pickerCancel" />
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import { mapGetters } from 'vuex'

import request from '@/util/request'
import Waterfall from '@/components/vant/waterfall'

export default {
  name: 'TaskList',
  data () {
    return {
      data: { results: [] },
      levels: [],
      catalogs: [],
      order: null,
      type: null,
      level: null,
      orderActionShow: false,
      typeActionShow: false,
      levelActionShow: false,
      isRefreshing: false,
      orderActions: [
        {
          name: '学习提高',
          id: 1,
          callback: this.choosePurpose
        },
        {
          name: '参赛投展',
          id: 2,
          callback: this.choosePurpose
        },
        {
          name: '艺考考级',
          id: 3,
          callback: this.choosePurpose
        },
        {
          name: '鉴赏收藏',
          id: 4,
          callback: this.choosePurpose
        },
        {
          name: '装饰布置',
          id: 5,
          callback: this.choosePurpose
        },
        {
          name: '全部',
          callback: this.chooseAllPurpose
        },
        {
          name: '取消',
          callback: this.cancelAction
        }
      ],
    }
  },
  watch: {
    isRefreshing() {
      if (this.isRefreshing) {
        this.refreshData()
      }
    }
  },
  directives: {
    WaterfallLower: Waterfall('lower')
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    typeList: function() {
      var actions = []
      actions.push('全部')
      for (var i = 0; i < this.catalogs.length; i++) {
        var catalog = this.catalogs[i]
        actions.push(catalog.name)
      }
      return actions
    },
    levelActions: function() {
      var levels = []
      for(var i = 0; i < this.levels.length; i++) {
        var le = this.levels[i]
        var item = {
          id: le.id,
          name: le.name,
          callback: this.chooseLevel
        }
        levels.push(item)
      }
      var all = { name: '全部', callback: this.chooseAllLevel }
      var cancel = { name: '取消', callback: this.cancelAction }
      levels.push(all)
      levels.push(cancel)
      return levels
    }
  },
  created () {
    this.getData()
    this.getLevels()
    this.getCatalogs()
  },
  methods: {
    showOrderAction() {
      this.orderActionShow = !this.orderActionShow
    },
    showTypeAction() {
      this.typeActionShow = !this.typeActionShow
    },
    showLevelAction() {
      this.levelActionShow = !this.levelActionShow
    },
    choosePurpose(item) {
      this.order = item
      this.orderActionShow = false
      this.refreshData()
    },
    pickerConfirm(value, index) {
      if (index == 0) {
        this.type = null
      } else {
        this.type = this.catalogs[index-1]
      }
      this.typeActionShow = false
      this.refreshData()
    },
    pickerCancel() {
      this.typeActionShow = false
    },
    chooseLevel(item) {
      this.level = item
      this.levelActionShow = false
      this.refreshData()
    },
    cancelAction() {
      this.orderActionShow = false
      this.typeActionShow = false
      this.levelActionShow = false
    },
    chooseAllPurpose() {
      this.orderActionShow = false
      this.order = null
      this.refreshData()
    },
    chooseAllLevel() {
      this.levelActionShow = false
      this.level = null
      this.refreshData()
    },
    viewDetail(index) {
      var question = this.data.results[index]
      var params = { question: question, id: question.id }
      this.$router.push({ name: 'questionDetail', params: params })
    },
    refreshData() {
      var that = this
      this.data = { results: [] }
      this.getData(null, function() {
        that.isRefreshing = false
      })
    },
    loadMoreData() {
      if (this.data.next) {
        this.getData(this.data.next)
      }
    },
    /*
     * 获取列表数据
     */
    getData(next=null, callback=null) {
      var params = { }
      var url = '/dianping/question/'
      if (next) {
        url = next
      } else {
        if (this.order) {
          params.purpose = this.order.name
        }
        if (this.type) {
          params.catalog = this.type.id
        }
        if (this.level) {
          params.master_level = this.level.id
        }
      }
      
      var that = this
      // 调用登陆接口
      this.axios.get(url, { params: params })
      .then(function (res) {
        console.log(res)
        if (res.status === 200) {
          that.data.results = that.data.results.concat(res.data.results)
          that.data.previous = res.data.previous
          that.data.next = res.data.next
          that.data.count = res.data.count
        }
        if (callback) {
          return callback()
        }
      })
      .catch(function (error) {
        console.log(error)
      })
    },
    getCatalogs: function() {
      if (this.$store.getters.questionCatalogs.length) {
        this.catalogs = this.$store.getters.questionCatalogs
      }
    },
    getLevels: function() {
      var that = this
      if (this.$store.getters.masterLevels.length) {
        this.levels = this.$store.getters.masterLevels
      } else {
        request.getLevels(function(err, res) {
          if (!err) {
            var payload = {
              levels: res.results
            }
            that.levels = res.results
            that.$store.dispatch('getMasterLevels', payload)
          }
        })
      }
    },
    grabQuestion() {
      console.log(this.userInfo)
      if (this.userInfo.user_type != 2) {
        return this.$toast('只有认证的【点评师】可以回答问题，请先前往个人设置去认证')
      }
      // 抢问题，需要请求后台接口
      var that = this
      var params = {}
      this.$toast.loading()
      this.axios.post('/dianping/qiang/', qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        console.log(res.data)
        if (res.data.id) {
          // 成功抢到，去到回答页面
          var params = {
            id: res.data.question,
            qiang: res.data
          }
          var query = {
            qiangId: res.data.id
          }
          that.$router.push({ name: 'questionDetail', params: params, query: query })
        
        } else {
          that.$toast.fail('没有抢到合适的任务')
        }
      })
      .catch(function (error) {
        console.log(error)
        that.$toast.clear()
        if (error.response) {
          that.$toast.fail(error.response.data.message)
        } else {
          that.$toast.fail('请求出错')
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>

  .task-tags {
    height: 48px;
    background: #fff;
    padding: 4px;
    overflow: hidden;
    box-sizing: border-box;
    .tag-item {
      width: 33%;
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      float: left;
      color: #747474;
      text-align: center;
      font-size: .6rem;
      height: 2rem;
      line-height: 2rem;
    }
    .tag-item img {
      width: 12px;
      height: 10px;
      vertical-align: middle;
    }
  }

  .question-wrapper {
    margin-top: 10px;
  }

  .grab-btn {
    position: fixed;
    right: .75rem;
    bottom: 2rem;
    width: 3.2rem;
    height: 3.2rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
